<template>
  <!-- 修改房间背景弹窗 -->
  <el-dialog
    class="sing_record_dialog"
    :model-value="modelValue"
    style="width: 343px; color: #fff"
    align-center
    draggable
    :modal="false"
    :append-to-body="true"
    @update:modelValue="(val) => $emit('update:modelValue', val)"
  >
    <template #header>
      <div class="custom-header">房间背景</div>
    </template>
    <el-scrollbar>
      <div class="background-box">
        <div
          v-for="i in backImgList"
          :key="i.id"
          class="background"
          :class="{ 'selected-border': selected === i.id }"
        >
          <el-image style="width: 100px; height: 160px" :src="pic" fit="cover" />
          <div class="selector" @click="selected = i.id">
            <div v-if="selected === i.id" class="selected">
              <img src="@/assets/live/selected_blue_circle.svg" />
              <!-- <span class="active-text">使用中</span> -->
            </div>
            <div style="height: 22px; width: 100%; text-align: center">
              {{ currentUse === i.id ? "使用中" : "" }}
            </div>
            <div
              style="
                height: 22px;
                width: 100%;
                text-align: center;
                font-weight: 500;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.6);
              "
            >
              {{ currentUse === i.id ? "永久" : "剩余30天" }}
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button class="fix-btn" type="primary" @click="handleSubmit">修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "RoomBackground",
};
</script>
<script lang="ts" setup>
// import { computed } from "vue";
import pic from "@/assets/images/login-bg-dark.jpg";
import { defineProps, defineEmits } from "vue";

// 选中的背景图
const selected = ref(1);
const backImgList = ref([
  {
    id: 1,
    img: "",
  },
  {
    id: 2,
    img: "",
  },
  {
    id: 3,
    img: "",
  },
  {
    id: 4,
    img: "",
  },
]);
const currentUse = ref(1);

defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

defineEmits(["update:modelValue"]);
// 提交修改房间背景
const handleSubmit = () => {
  console.log("修改房间背景");
};
</script>

<style lang="scss" scoped>
.sing_record_dialog {
  // 弹窗标题
  .custom-header {
    font-size: 16px;
    color: #ffffff;
  }
  //背景图
  .background-box {
    display: flex;
    justify-content: space-between;
    padding: 30px 10px;
    gap: 10px;
    flex-wrap: wrap;
    height: 284px;
    .background {
      width: 100px;
      width: calc((100% - 20px) / 3);
      height: 160px;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
      color: #fff;
      white-space: wrap;
      &.selected-border {
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #ff4e6c;
      }

      .selector {
        width: 100%;
        height: 100%;
        background-color: transparent;
        top: 0;
        position: absolute;
        font-size: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 4px;
        .selected {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin: auto;
          img {
            width: 100% !important;
            height: 100% !important;
            display: block;
          }
          .active-text {
            font-weight: 500;
            font-size: 12px;
            color: #ffffff;
            white-space: nowrap;
          }
        }
      }
    }
  }
  //底部修改按钮
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid rgba(216, 216, 216, 0.5);
    .fix-btn {
      width: 54px;
      height: 26px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px 4px 4px 4px;
      border: none;
      color: #ff4e6c;
      font-size: 12px;
      padding: 7px 15px;
    }
  }
}

:deep(.sing_record_dialog) {
  .el-dialog__header {
    .el-dialog__title {
      color: #fff !important;
    }
  }
}
</style>
